<template>
  <div class="header">
    <div class="container">
      <div class="header-left">
        <a href="#" @click="BackFirst">首页</a>
        <a href="#">MIUI</a>
        <a href="#">云服务</a>
        <a href="#">协议规则</a>
      </div>
      <div class="header-right">
        <el-dropdown v-if="username" class="dropdown">
          <span class="el-dropdown-link">
            {{username}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu class="munu" slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>评价晒单</el-dropdown-item>
            <el-dropdown-item>我的喜欢</el-dropdown-item>
            <el-dropdown-item>小米账户</el-dropdown-item>
            <el-dropdown-item>
              <span @click="handleLogout">退出登陆</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <a href="#" @click="handleLogin" v-else>登陆</a>
        <a href="#" @click="handleRegister" v-if="!username">注册</a>
        <a href="/#/cart" class="card">
          <img src="/imgs/icon-cart-checked.png" alt="">
          购物车[{{cart || 0}}]
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import {Logout, getCartSum} from "../api/home";

export default {
  name: 'nav-header',
  data () {
    return {
      username: this.$store.state.username || ''
    }
  },
  methods: {
    handleLogin () {
      if (!this.username) {
        this.$router.push('login')
      } else {
        console.log('进入个人主页')
      }
    },
    handleRegister () {
      this.$router.push('register')
    },
    BackFirst () {
      this.$router.push('/index')
    },
    handleLogout () {
      Logout().then(res => {
        const data = res.data
        if (data.status === 0) {
          this.$cookies.set('username', '')
          // this.$router.go(0)
          this.$message('退出成功')
        }
      })
    }
  },
  mounted () {
    this.username = this.$cookies.get('username')
    getCartSum().then(res => {
      const num = res.data.data
      this.$store.dispatch('saveCart', num)
    })
  },
  computed: {
    cart () {
      return this.$store.state.cart
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

.dropdown {
  position: relative;
  width: 150px;
  text-align: right;
}

.munu {
  width: 100px;
}

.header {
  font-size: 12px;
  background: #343434;
  min-width: 1226px;
  box-sizing: border-box;
  height: 39px;
  line-height: 39px;

  .container {
    width: 1226px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .header-left {
      a {
        display: inline-block;
        margin-right: 17px;
      }

    }

    .header-right {
      a {
        display: inline-block;
        margin-left: 17px;
      }

      .card {
        width: 110px;
        background: #666666;
        text-align: center;
        height: 39px;

        img {
          width: 16px;
          height: 12px;
        }
      }
    }
  }
}

</style>
